import React, { useEffect, useState } from 'react'
import { RouteComponentProps } from 'react-router-dom'
import { store_name } from '../../..//util'

interface MatchParams {
  name: string
}

const Workspace: React.FC<RouteComponentProps<MatchParams>> = props => {
  const [isLoading, setIsLoading] = useState(false)
  const [workspace, setWorkspace] = useState<Workspace>()

  useEffect(() => {
    setIsLoading(true)
    chrome.storage.local.get(store_name, ({ workspaces }) => {
      const data = workspaces as Workspace[]
      const workspace = data.find(item => item.name == props.match.params.name)
      setWorkspace(workspace)
      setIsLoading(false)
    })
  }, [])

  if (isLoading) {
    return <h1>Loading...</h1>
  }

  if (!isLoading && !workspace) {
    return <h1>error!</h1>
  }

  return (
    <div>
      <h2>{workspace!.name}</h2>
      <div></div>
    </div>
  )
}

export default Workspace
